<template>
  <div class="notice-summary-detail">
    <el-drawer
      class="drawer"
      title="通知公告分析"
      :visible.sync="visible"
      :before-close="close"
      direction="rtl"
      size="80%">

      <el-tabs type="border-card" v-if="visible" class="tabs" :value="activeTab" :before-leave="onTabChange">
        <el-tab-pane label="部门" class="tab-item" name="dept">
          <dept-notice-summary :notice-id="noticeId" v-if="activeTab === 'dept'" />
        </el-tab-pane>
        <el-tab-pane label="个人" class="tab-item" name="user">
          <user-notice-summary :notice-id="noticeId" v-if="activeTab === 'user'" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
import DeptNoticeSummary from './dept-notice-summary'
import UserNoticeSummary from './user-notice-summary'
export default {
  name: 'noticeSummaryDetail',
  components: {
    DeptNoticeSummary, UserNoticeSummary
  },
  data () {
    return {
      visible: false,
      noticeId: null,
      activeTab: 'dept'
    }
  },
  methods: {
    onTabChange (tab) {
      this.activeTab = tab
    },
    open (noticeId) {
      this.noticeId = noticeId
      this.visible = true
    },
    close () {
      this.visible = false
    }
  }
}
</script>
